<template>
  <div class="main">
    <!-- 顶部导航 -->
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.go(-1)" />
    <div>
      <p class="fy">房源信息</p>
    </div>
    <!-- 下列选项列表 -->
    <van-cell-group>
      <van-cell
        title="小区名称"
        is-link
        value="请输入小区名称"
        to="/rent/search"
      />
      <van-cell title="租金" value="￥/月" />
      <van-cell title="建筑面积" value="m²" />
      <van-cell title="户型" is-link :value="value" @click="showHx = true" >
      </van-cell>
      <van-popup v-model="showHx"  position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showHx = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-cell title="所在楼层" is-link :value="value2"  @click="showLc = true"/>
      <van-popup v-model="showLc"  position="bottom">
        <van-picker
          show-toolbar
          :columns="columnsLc"
          @cancel="showLc = false"
          @confirm="onConfirm2"

        />
      </van-popup>
      <van-cell title="朝向" is-link :value="value3" @click="showCx = true"/>
      <van-popup v-model="showCx"  position="bottom">
        <van-picker
          show-toolbar
          :columns="columnsCx"
          @cancel="showCx = false"
          @confirm="onConfirm3"

        />
      </van-popup>
      <van-cell value="房屋标题" />
      <input
        type="text"
        class="hometit"
        placeholder="请输入标题（例如：整租小区名2室5000元）"
        style="font-size: 14px;width: 370px;"
      />
      <van-cell value="房屋图像"></van-cell>
      <van-uploader
        :after-read="afterRead"
        style="margin-left: 12px; margin-top: 5px"
      />
      <van-cell value="房屋配置" />
      <ul>
        <li>
          <span class="iconfont icon-yigui"></span>
          <div>衣柜</div>
        </li>
        <li>
          <span class="iconfont icon-xiyiji"></span>
          <div>洗衣机</div>
        </li>
        <li>
          <span class="iconfont icon-kongdiao"></span>
          <div>空调</div>
        </li>
        <li>
          <span class="iconfont icon-meiqitianranqi"></span>
          <div>天然气</div>
        </li>
        <li>
          <span class="iconfont icon-bingxiang"></span>
          <div>冰箱</div>
        </li>
        <li>
          <span class="iconfont icon-nuanqi"></span>
          <div>暖气</div>
        </li>
        <li>
          <span class="iconfont icon-dianshiji"></span>
          <div>电视</div>
        </li>
        <li>
          <span class="iconfont icon-haofangtuo400iconfont2reshuiqi"></span>
          <div>热水器</div>
        </li>
        <li>
          <span class="iconfont icon-kuandai"></span>
          <div>宽带</div>
        </li>
        <li>
          <span class="iconfont icon-shafa"></span>
          <div>沙发</div>
        </li>
      </ul>
      <van-cell class="kong"></van-cell>
      <van-cell value="房屋描述" />
      <!-- <input type="areatext" placeholder="请输入房屋描述信息" class="housemx"> -->
      <textarea cols="47" rows="10" placeholder="请输入房屋描述信息"></textarea>
      <van-cell
        class="kong"
        style="margin-bottom: 40px; height: 40px"
      ></van-cell>
    </van-cell-group>
    <div class="rent-bot">
      <div class="bot-left" @click="cancerFn">取消</div>
      <!-- 点击取消后的弹窗 -->
      <!-- <van-popup v-model="show" round class="neirong">内容</van-popup> -->
      <van-dialog v-model="show" title="标题" show-cancel-button> </van-dialog>
      <div class="bot-right" @click="submitFn">提交</div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'

export default {
  data () {
    return {
      show: false,
      columns: ['一室', '两室', '三室', '四室', '四室+'],
      columnsLc: ['高楼层', '中楼层', '低楼层'],
      columnsCx: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      showHx: false,
      showLc: false,
      showCx: false,
      value: '请选择',
      value2: '请选择',
      value3: '请选择'

    }
  },
  methods: {
    onConfirm (value) {
      this.value = value
      this.showHx = false
    },
    onConfirm2 (value) {
      this.value2 = value
      this.showLc = false
    },
    onConfirm3 (value) {
      this.value3 = value
      this.showCx = false
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    cancerFn () {
      // this.show = true
      Dialog.confirm({
        title: '提示',
        message: '放弃发布房源？',
        confirmButtonText: '继续编辑',
        cancelButtonText: '放弃',
        confirmButtonColor: '#108ee9'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    },
    submitFn () {}
    // showPopup () {
    //   this.show = true
    // }
  }
}
</script>

<style lang="less" scoped>
// 底部取消提交
.rent-bot {
  display: flex;
  width: 375px;
  height: 45px;
  position: fixed;
  bottom: 0;
  font-size: 14px;
  line-height: 45px;
  .bot-left {
    width: 50%;
    text-align: center;
    background-color: #fff;
    color: #21b97a;
  }

  .bot-right {
    width: 50%;
    text-align: center;
    background-color: #21b97a;
    color: #fff;
  }
}
.fy {
  font-size: 14px;
  color: #21b97a;
  margin-left: 15px;
}
.hometit {
  background-color: #fff;
  border: #fff;
  margin-left: 10px;
}
input::-webkit-input-placeholder {
  font-size: 14px;
  color: #bbbbbb;
  padding: 4px;
}

.housemx {
  margin-left: 12px;
  margin-right: 12px;
  margin-top: 7px;
  height: 130px;
  margin-bottom: 30px;
  width: 340px;
  border: 0;
  font-size: 14px;
}

ul {
  display: flex;
  margin-left: 5px;
  width: 370px;
  height: 150px;
  flex-wrap: wrap;
  margin-top: 5px;
}
/deep/ ul li {
  text-align: center;
  width: 70px;
  height: 50px;
}
li div {
  font-size: 14px;
}
textarea {
  font-size: 14px;
  margin-left: 10px;
  border: 0;
  margin-top: 15px;
}
.kong {
  height: 20px;
  background-color: #f6f5f6;
}
// 自定义图标
.iconfont {
  font-size: 20px;
  .icon-yigui {
    font-style: 800;
  }
}
.neirong {
  width: 270px;
  height: 141px;
}

/deep/ .van-picker-column{
  margin-left: 155px;
}
</style>>
